<style lang="less">
.hmCouponList {
}
</style>
<template>
    <div class="hmCouponList">
        <Card>
            <Row v-show="openSearch">
                <Form ref="searchForm" :model="searchForm" inline :label-width="100" @keydown.enter.native="handSearch">
                    <FormItem label="优惠券名称">
                        <Input type="text" v-model="searchForm.couponName" placeholder="请输入" clearable style="width: 200px"/>
                    </FormItem>
                    <Form-item style="margin-left:-35px" class="br">
                        <Button @click="handSearch" type="primary" icon="ios-search">搜索</Button>
                        <Button @click="handReset">重置</Button>
                    </Form-item>
                </Form>
            </Row>
            <div class="operation">
                <Button @click="addHmCoupon" type="primary" icon="md-add">新增</Button>
                <Button @click="delAll" type="error" icon="md-trash">批量删除</Button>
                <Button type="dashed" @click="openSearch=!openSearch">{{ openSearch ? '关闭搜索' : '开启搜索' }}</Button>
            </div>
            <div>
                <Table :loading="loading" border :columns="columns" sortable="custom" :data="data" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" @click="handLook(row, index)" size="small">
                            <Icon type="ios-eye-outline"/>
                            查看
                        </Button>
                        <Dropdown :transfer=true>
                            <Button size="small">
                                更多操作
                                <Icon type="md-arrow-dropdown"/>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem name="edit" @click.native="handEdit(row, index)">
                                    <Icon type="ios-create-outline"/>
                                    修改
                                </DropdownItem>
                                <DropdownItem name="delete" @click.native="deleteData(row, index)">
                                    <Icon type="md-trash"></Icon>
                                    删除
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </template>
                </Table>
            </div>
            <Row type="flex" justify="end" class="page">
                <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize"
                      :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
            </Row>
        </Card>
        <updateHmCoupon v-model="updateShow" :HmCouponId="HmCouponId" :modalTitle="title" v-on:handSearch="handSearch"></updateHmCoupon>
    </div>
</template>
<script>
import {deleteHmCoupon, queryHmCouponList} from '@/api/hmzd/hmCoupon'
import updateHmCoupon from './updateHmCoupon'

export default {
    components: {
        updateHmCoupon
    },
    data() {
        return {
            drop: false,
            dropDownContent: "展开",
            dropDownIcon: "ios-arrow-down",
            search: '',
            data: [],
            columns: this.getHmCouponColumns(),
            openSearch: true,//打开搜索
            openTip: true,//打开提示
            loading: true, // 表单加载状态
            selectCount: 0, // 多选计数
            selectList: [], // 多选数据
            searchForm: {
                // 搜索框对应data对象
                couponName: '',
                couponType: '',
                pageNumber: 1, // 当前页数
                pageSize: 10, // 页面大小
                startDate: null,//开始时间
                endDate: null,//结束时间
                sort: 'createTime', // 默认排序字段
                order: 'desc' // 默认排序方式
            },
            total: 0,
            title: '',
            HmCouponId: '',
            updateShow: false,
            tableHeight: 200,
        }
    },
    methods: {
        //时间选择事件
        selectDateRange(v) {
            if (v) {
                this.searchForm.startDate = v[0];
                this.searchForm.endDate = v[1];
            }
        },
        //新增
        addHmCoupon() {
            this.title = '新增';
            this.updateShow = true
            this.HmCouponId = '';
        },
        //编辑
        handEdit(row, index) {
            this.title = '编辑';
            this.HmCouponId = row.couponId.toString();
            this.updateShow = true;
        },
        //查看
        handLook(row, index) {
            this.title = '查看';
            this.HmCouponId = row.couponId.toString();
            this.updateShow = true;
        },
        //分页查询
        getDataList() {
            this.loading = true;
            queryHmCouponList(this.searchForm).then(res => {
                if (res.success) {
                    this.loading = false;
                    this.data = res.data.records;
                    this.total = res.data.total;
                }
            });
        },
        //单一删除
        deleteData(row, index) {
            this.$Modal.confirm({
                title: "确认删除",
                content: "您确认要删除所点击选的数据?",
                loading: true,
                onOk: () => {
                    this.userLoading = true;
                    var ids = [];
                    ids.push(row.couponId);
                    this.patchDeleteData(ids);
                },
                onCancel: () => {
                    this.$Message.info('取消了当前的操作行为！');
                },
            });
        },
        //批量删除
        delAll() {
            if (this.selectCount <= 0) {
                this.$Message.warning('您还未选择要删除的数据');
                return;
            }
            this.$Modal.confirm({
                title: '确认删除',
                content: '您确认要删除所选的 ' + this.selectCount + '条数据?',
                loading: true,
                onOk: () => {
                    let ids = [];
                    this.selectList.forEach(function (e) {
                        ids.push(e.couponId);
                    });
                    this.patchDeleteData(ids);
                },
                onCancel: () => {
                    this.$Message.info('取消了当前的操作行为！');
                }
            });
        },
        //删除（后台）
        patchDeleteData(ids) {
            if (ids == undefined || ids == null || ids.length == 0) {
                this.$Message.error('没有选择的数据');
                return;
            }

            deleteHmCoupon({ids: ids}).then(res => {
                this.userLoading = false;
                this.$Modal.remove();
                if (res.success) {
                    this.modalTaskVisible = false;
                    this.$Message.success('删除成功');
                    this.getDataList();
                } else {
                    this.$Message.error('删除失败');
                }
            });
        },
        //改变页码
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        //改变每页显示数据的条数
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        //改变排序方式
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order == 'normal') {
                this.searchForm.order = '';
            }
            this.getDataList();
        },
        //查询
        handSearch() {
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 10;
            this.getDataList();
        },
        //重置
        handReset() {
            this.$refs.searchForm.resetFields();
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 10;
            this.searchForm.startDate = null;
            this.searchForm.endDate = null;
            this.selectDate = null;
            this.searchForm.couponName = '';
            this.searchForm.couponType = '';
            // 重新加载数据
            this.getDataList();
        },
        //显示选择
        showSelect(e) {
            this.selectList = e;
            this.selectCount = e.length;
        },
        //清空选择
        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        //获取列表字段
        getHmCouponColumns() {
            return [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: '优惠券名称',
                    align: 'center',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'couponName',
                    sortable: false
                },
                {
                    title: '使用条件',
                    align: 'center',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'cashCondition',
                    sortable: false
                },
                {
                    title: '减免金额',
                    align: 'center',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'reduceAmount',
                    sortable: false
                },
                // {
                //     title: '原始库存',
                //     align: 'center',
                //     minWidth: 120,
                //     ellipsis: true,
                //     tooltip: true,
                //     key: 'sourceStock',
                //     sortable: false
                // },
                {
                    title: '领取次数',
                    align: 'center',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'takeNum',
                    sortable: false
                },
                {
                    title: '使用次数',
                    align: 'center',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'useNum',
                    sortable: false
                },
                {
                    title: '操作',
                    align: 'center',
                    slot: 'action',
                    width: 200,
                }
            ]
        },
    },
    mounted() {
        this.getDataList();
    }
}
</script>
<style scoped="less">
.operation {
    margin-bottom: 10px;
}
</style>
